const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");
// const {WebPlugin} = require('web-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const fs = require("fs");
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');


let jsList = fs.readdirSync("./web/js/");
let entry = {};
for (let key in jsList) {
    entry[jsList[key].replace(".js", "")] = `./web/js/${jsList[key]}`
}



let cssList = fs.readdirSync("./web/css/");
// let entry = {};
for (let key in cssList) {
    entry[cssList[key].replace(".css", "")] = `./web/css/${cssList[key]}`
}

console.log(entry);



let htmlList = fs.readdirSync("./web/html/");
let htmls = [];
for (let key in htmlList) {
    key = htmlList[key];
    let name = key.replace(".html", "");
    let conf = {
        // title: name,
        template: `./web/html/${key}`, // 源模板文件
        filename: `../${key}`, // 输出文件
        // showErrors: true,
        inject: false,
        // chunks: [name],
        // requires: [name],
        templateParameters: { jsName: name + ".js" },
    };
    console.log(conf);
    conf = new HtmlWebpackPlugin(conf);
    htmls.push(conf);
}


const commonCssLoader = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        loader: "postcss-loader",
        options: {
            //css兼容性配置
            postcssOptions: {
                plugins: [
                    [
                        require('postcss-preset-env')()
                    ]
                ]
            }
        }
    }
];


module.exports = {
    mode: 'production',
    // mode: 'development',
    entry: entry,
    // devtool: 'inline-source-map',
    plugins: [...htmls,
        // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
        new ParallelUglifyPlugin({
            // 传递给 UglifyJS 的参数
            uglifyJS: {
                output: {
                    // 最紧凑的输出
                    beautify: false,
                    // 删除所有的注释
                    comments: false,
                },
                compress: {
                    // 删除所有的 `console` 语句，可以兼容ie浏览器
                    drop_console: true,
                    // 内嵌定义了但是只用到一次的变量
                    collapse_vars: true,
                    // 提取出出现多次但是没有定义成变量去引用的静态值
                    reduce_vars: true,
                }
            },
            cacheDir: './.cache'
        }),
        new CssMinimizerPlugin(),
        new MiniCssExtractPlugin({
            filename: '../css/[name].css', //输出的文件名字
        }),
    ],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'public/js'),
        clean: true
    },
    module: {
        rules: [
            // {
            //  test: /\.css$/i,
            //  use: ['style-loader', 'css-loader'],
            // },
            {
                oneOf: [{
                    test: /\.css$/i,
                    use: commonCssLoader,
                    enforce: 'pre', //优先执行
                }]
            }
        ],
    }
};